import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'

import './index.scss'

const Activity = () => {
  const jumpDetails = () => {
    Taro.navigateTo({
      url: '/pages/activity-details/index'
    })
  }

  return (
    <View className='activity-box'>
      <View className='tabBar-header'>
        <View className='tabBar-item'>
          <View className='tabBar-item-text'>地点</View>
          <AtIcon value='chevron-down' size='12' color='#aaa'></AtIcon>
        </View>
        <View className='tabBar-item'>
          <View className='tabBar-item-text'>时间</View>
          <AtIcon value='chevron-down' size='12' color='#aaa'></AtIcon>
        </View>
        <View className='tabBar-item'>
          <View className='tabBar-item-text'>类型</View>
          <AtIcon value='chevron-down' size='12' color='#aaa'></AtIcon>
        </View>
      </View>
      <View className='activity-body'>
        <View className='activity-types'>
          <View className='activity-type-item'>
            <View className='type-header'>
              <View className='activity-name'>热门活动</View>
              <View className='more'>
                <Text>更多</Text>
                <AtIcon value='chevron-right' color='#aaa'></AtIcon>
              </View>
            </View>
            <View className='type-body'>
              <View className='type-list'>
                <View className='type-info' onClick={jumpDetails}>
                  <View className='type-img'></View>
                  <View className='type-name'>全国移动互联创新大赛</View>
                  <View className='type-date'>2017-02-26</View>
                </View>
                <View className='type-info' onClick={jumpDetails}>
                  <View className='type-img'></View>
                  <View className='type-name'>全国移动互联创新大赛</View>
                  <View className='type-date'>2017-02-26</View>
                </View>
                <View className='type-info' onClick={jumpDetails}>
                  <View className='type-img'></View>
                  <View className='type-name'>全国移动互联创新大赛</View>
                  <View className='type-date'>2017-02-26</View>
                </View>
              </View>
            </View>
          </View>
          <View className='activity-type-item'>
            <View className='type-header'>
              <View className='activity-name'>讲座类</View>
              <View className='more'>
                <Text>更多</Text>
                <AtIcon value='chevron-right' color='#aaa'></AtIcon>
              </View>
            </View>
            <View className='type-body'>
              <View className='type-list'>
                <View className='type-info'>
                  <View className='type-img'></View>
                  <View className='type-name'>全国移动互联创新大赛</View>
                  <View className='type-date'>2017-02-26</View>
                </View>
                <View className='type-info'>
                  <View className='type-img'></View>
                  <View className='type-name'>全国移动互联创新大赛</View>
                  <View className='type-date'>2017-02-26</View>
                </View>
                <View className='type-info'>
                  <View className='type-img'></View>
                  <View className='type-name'>全国移动互联创新大赛</View>
                  <View className='type-date'>2017-02-26</View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default Activity
